<template>
  <div class="chart pt-10">
    <div id="mapChart" class="mapChart"></div>
    <img class="header-background" src="../../../assets/img/head_bg.png"/>
    <div class="mapChoose">
      <span v-for="(item,index) in selectedMaps" :key="item.code">
        <span class="title" @click="chooseMap(item,index)">{{item.name === 'china' ? '全国' : item.name}}</span>
        <span class="icon" v-show="index + 1 != selectedMaps.length">></span>
      </span>
    </div>
    <PanelTemplate id="OrderData"
                   ref="PanelTemplate"
                   class="PanelTemplate"></PanelTemplate>
    <PanelTemplate id="OrderData2"
                   ref="PanelTemplate2"
                   class="PanelTemplate"></PanelTemplate>
<!--    <PanelTemplate id="OrderData3"-->
<!--                   ref="PanelTemplate3"-->
<!--                   class="PanelTemplate"></PanelTemplate>-->
<!--    <PanelTemplate id="OrderData4"-->
<!--                   ref="PanelTemplate4"-->
<!--                   class="PanelTemplate"></PanelTemplate>-->
    <div class="list">
      <div type="primary"
         v-for="(item,key) in list"
         v-bind:key="key"
         class="listItem">
        <div class="list-item-header"></div>
        <span class="list-left">{{item.code}}</span>
        <span class="list-right"
        >
          <a v-on:click="shouVillageInfo(item.code)">
            {{item.name}}
          </a>
        </span>
        <br>
        <div class="list-item-footer"></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import {mapCode} from '../../../assets/json/map/mapCode'
import {_debounce} from '../../../utils/common'
import PanelTemplate from './PanelTemplate'
import echartsOption from '../../../assets/EchartsOption'
export default {
  name: 'chinaMap',
  components: {
    PanelTemplate
  },
  data () {
    return {
      list: this.getAdrressData('china'),
      addressCode: 0,
      myChart: null,
      chinaCode: 100000,
      curMapName: 'china', // 当前地图名
      selectedMaps: [
        {
          name: 'china',
          code: '100000'
        }
      ],
      OrderDataOption: echartsOption.OrderDataOption,
      OrderDataOption2: echartsOption.orderDataByTimeOption,
      OrderDataOption3: echartsOption.SingleOrderDataOption,
      OrderDataOption4: echartsOption.SingleOrderDataOption
    }
  },
  methods: {
    shouVillageInfo (itemCode) {
      this.$router.push(`/villageMainInfo`)
    },
    getAdrressData (addressCode) {
      axios.get(`/selectAddressData/${addressCode}`)
        .then((res) => {
          this.list = res.data
        }).catch((err) => {
          this.$message.error('查询省市县镇村数据失败' + err)
        })
    },
    // 绘制地图
    drawMapChart (mapName, mapJSON) {
      if (this.myChart != null && this.myChart !== '' && this.myChart !== undefined) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('mapChart'))
      this.$echarts.registerMap(mapName, mapJSON)
      this.myChart.setOption({
        series: [
          {
            type: 'map',
            map: mapName,
            roam: true, // 是否开启鼠标缩放和平移漫游
            selectedMode: 'false', // 是否允许选中多个区域
            label: {
              show: true,
              color: '#a8e6e1'
            },
            emphasis: {
              label: {
                show: true,
                color: '#ffffff'
              }
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(23, 27, 57,0)',
                borderColor: '#1dc199',
                borderWidth: 1
              }
            },
            data: this.initMapData(mapJSON)
          }
        ]
      })

      this.myChart.on('click', (params) => {
        // map即mapCode.js中的数字编号
        const map = mapCode[params.name]
        // const addressName = mapCode[params]
        if (map) {
          this.curMapName = params.name
          this.getMapData(map)
          // 获取echarts图标所需数据并将其设置在页面中
          this.getEchartsOrderData(params.name)
          // 为地图标题菜单存入（过滤同一地图多次点击情况）点击地图信息
          let selectedCodes = []
          this.selectedMaps.forEach(item => selectedCodes.push(item.code))
          if (!selectedCodes.includes(map)) {
            this.$set(this.selectedMaps, this.selectedMaps.length, {name: this.curMapName, code: map})
          }
          // 设置右侧列表的数据
          console.log(String(map).length)
          if (String(map).length === 9) {
            this.addressCode = map
          } else {
            switch (map.indexOf('00')) {
              case -1:
                this.addressCode = map
                break
              case 2:
                this.addressCode = map.substring(0, 2)
                break
              case 4:
                this.addressCode = map.substring(0, 4)
                break
            }
          }
          this.getAdrressData(this.addressCode)
        } else {
          // 返回到中国全图
          this.chooseMap(
            {name: 'china',
              code: '100000'}, 0)
          // this.$message({message: '暂无地图数据', type: 'warning', showClose: true})
        }
      })
    },
    // 初始化
    initMapData (mapJson) {
      let mapData = []
      for (let i = 0; i < mapJson.features.length; i++) {
        mapData.push({ name: mapJson.features[i].properties.name })
      }
      return mapData
    },
    // 地图/标题菜单点击
    chooseMap (item, index) {
      this.selectedMaps.splice(index + 1)
      this.getMapData(item.code)
    },
    // 浏览器窗口大小改变时，重新加载图表以自适应
    resizeCharts: _debounce(function () {
      this.$echarts.init(document.getElementById('mapChart')).resize()
    }, 500),
    // 获取地图数据
    getMapData (map) {
      this.$axios({
        baseURL: `/static/json/map/${map}.json`,
        method: 'get'
      })
        .then((res) => {
          if (res.status === 200) {
            const mapJSON = res.data
            this.drawMapChart(this.curMapName, mapJSON)
          }
        }).catch((err) => {
          this.$message({message: err, type: 'error', showClose: true})
        })
    },
    getEchartsOrderData (addressName) {
      this.$axios.post('selectOrderData',
        'addressName=' + addressName
      ).then(successResponse => {
        // 更新源数据
        this.OrderDataOption.dataset.source = successResponse.data
        // 更新标题
        this.OrderDataOption.title.text = addressName
        // 更新组件展现的内容
        this.$refs.PanelTemplate.drawLine(this.OrderDataOption)
        this.$refs.PanelTemplate2.drawLine(this.OrderDataOption2)
        // this.$refs.PanelTemplate3.drawLine(this.OrderDataOption3)
        // this.$refs.PanelTemplate4.drawLine(this.OrderDataOption4)
      }).catch(failResponse => {
        this.$message.error('向服务器获取大数据失败')
      })
    },
    beforeDestroy () {
      window.addEventListener('resize', this.resizeCharts)
    }
  },
  mounted () {
    this.getMapData(this.chinaCode)
    window.addEventListener('resize', this.resizeCharts)
    this.getEchartsOrderData('china')
    console.log(this.list)
  }
}
</script>

<style lang="scss" scoped>
.chart{
  position: relative;
  background-image: url('../../../assets/img/bg.jpg');
  background-size: 100% 100%;
  #mapChart{
    width: 100%;
    height: 690px;
    //height: 840px; //全屏的尺寸
  }
  .mapChoose {
    position: absolute;
    left: 25%;
    top: 5px;
    color: #eee;
    font-size: 40px;
    .title {
      position: relative;
      padding: 5px;
      z-index: 126;
      //border-top: 1px solid rgba(132, 219, 233, 0.8);
      //border-bottom: 1px solid rgba(147, 235, 248, 0.8);
      cursor: pointer;
    }
    .icon {
      font-family: 'simsun';
      font-size: 25px;
      margin: 0 11px;
    }
  }
  .header-background{
    position: absolute;
    z-index: 5;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    /* 元素遮罩层不遮挡下方元素的代码 */
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    -ms-pointer-events: none;
    -o-pointer-events: none;
    pointer-events: none;
  }
  #OrderData{
    position: absolute;
    top: 80px;
    left: 0;
  }
  #OrderData2{
    position: absolute;
    bottom: 0px;
    left: 0;
  }
  #OrderData3{
    position: absolute;
    top: 80px;
    right: 0;
  }
  #OrderData4{
    position: absolute;
    bottom: 0px;
    right: 0;
  }
}
.list{
  position: absolute;
  right: 0;
  top: 80px;
  background: rgba(255, 255, 255, 0.04) url('../../../assets/img/line.png');
  width: 400px;
  height: 87%;
  z-index: 127;
  border: 1px solid rgba(25, 186, 139, 0.17);
  overflow-y: auto;
  // 隐藏滚动条
  scrollbar-width: none;
  .listItem{
    size: 40px;
    color: #01e8ff;
    line-height: 40px;
    position: relative;
    .list-left{
      display: inline;
      position: absolute;
      left: 60px;
    }
    .list-right{
      display: inline;
      position: absolute;
      a{
        text-decoration: none;
        color: #01e8ff;
      }
    }
  }
  .listItem:hover{
    background-color: #0225c7;
    cursor:pointer;
  }
}
.list::-webkit-scrollbar {
  display: none;   //谷歌隐藏滚动条
}
.list-item-header{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.list-item-header::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 5px;
  height: 5px;
  border-top: 2px solid #01e8ff;
  border-left: 2px solid #01e8ff;
}
//.list-item-header::after {
//  position: absolute;
//  top: 0;
//  right: 0;
//  content: "";
//  width: 5px;
//  height: 5px;
//  border-top: 2px solid #01e8ff;
//  border-right: 2px solid #01e8ff;
//}
.list-item-footer{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
//.list-item-footer::before {
//  position: absolute;
//  bottom: 0;
//  left: 0;
//  content: "";
//  width: 5px;
//  height: 5px;
//  border-bottom: 2px solid #01e8ff;
//  border-left: 2px solid #01e8ff;
//}
.list-item-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 5px;
  height: 5px;
  border-bottom: 2px solid #01e8ff;
  border-right: 2px solid #01e8ff;
}
</style>
